<template>
  <div >
    <el-row :span="24">
        <el-col :span="8">
            <el-input v-model="queryDeptText" placeholder="请输入科室编号或者科室名称"></el-input>
        </el-col>
        <el-col :span="8">
            <el-button @click="queryDept()">查询</el-button>
            <el-button @click="showAddDeptDialog=true">增加部门</el-button>
        </el-col>
        <el-col :span="8">
            <p></p>
        </el-col>
        <el-col :span="8">

        </el-col>
    </el-row>
    <el-dialog title="增加部门" :visible.sync="showAddDeptDialog" center>
        <el-form :model="deptAddForm" :label-position="labelPosition" inline>
            <el-form-item label="部门编号:" >
                <el-input v-model="deptAddForm.num" style="width: 222px;" placeholder="请输入部门编号"></el-input>
            </el-form-item>
            <el-form-item label="部门名称:" >
                <el-input v-model="deptAddForm.name" style="width: 222px;" placeholder="请输入部门名称"></el-input>
            </el-form-item>
            <el-form-item label="科室分类:"  inline>
              <el-select v-model="deptAddForm.deptclassity" placeholder="科室分类">
                <el-option :label="item.classifyname" :value="item.id" v-for="item in form.deptclassity" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="科室类型:" inline>
              <el-select v-model="deptAddForm.depttype" placeholder="科室分类">
                <el-option :label="item.typename" :value="item.id" v-for="item in form.depttype" :key="item.id"></el-option>
              </el-select>
            </el-form-item>

        </el-form>
         <div  slot="footer" class="dialog-footer">
             <el-button type="warning" @click="showAddDeptDialog = false" >取 消</el-button>
             <el-button type="primary" @click="addDeptDialog()">创 建</el-button>
           </div>
    </el-dialog>
      <el-table
        :data="tableData"
        style="width: 100%">
    	<el-table-column
    	  type="selection"
    	  select-on-indeterminate=true
    	  width="160">
    	</el-table-column>
        <el-table-column
          label="科室编号"
          width="180">
          <template slot-scope="scope">
            {{ scope.row.deptnum }}
          </template>
        </el-table-column>
    	<el-table-column
    	  label="科室名称"
    	  width="180">
    	  <template slot-scope="scope">
    	    {{ scope.row.deptname }}
    	  </template>
    	</el-table-column>
        <el-table-column
          label="科室分类"
          width="180">
          <template slot-scope="scope">
               {{ scope.row.classifyname }}
          </template>
        </el-table-column>
    	<el-table-column
    	  label="科室类型"
    	  width="180">
    	  <template slot-scope="scope">
    	      {{ scope.row.typename }}
    	  </template>
    	</el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
               @click="editDept(scope.row)">编辑</el-button>
              <el-dialog title="编辑科室" :visible.sync="dialogFormVisible" center>
                <el-form :model="form" :label-position="labelPosition" inline>
                  <el-form-item label="科室编号" :label-width="formLabelWidth">
                    <el-input v-model="form.deptData.deptnum" autocomplete="off" style="width: 222px;" placeholder="请输入科室编号"></el-input>
                  </el-form-item>
                  <el-form-item label="科室名称" :label-width="formLabelWidth">
                    <el-input v-model="form.deptData.deptname" autocomplete="off" style="width: 222px;" placeholder="请输入科室编号"></el-input>
                  </el-form-item>
                  <el-form-item label="科室分类" :label-width="formLabelWidth">
                    <el-select v-model="form.deptData.classifyname" placeholder="科室分类">
                      <el-option :label="item.classifyname" :value="item.classifyname" v-for="item in form.deptclassity" :key="item.classifyname"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="科室类型" :label-width="formLabelWidth">
                    <el-select v-model="form.deptData.typename" placeholder="科室类型">
                      <el-option :label="item.typename" :value="item.typename" v-for="item in form.depttype" :key="item.typename"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false" >取 消</el-button>
                  <el-button type="primary" @click="updateDept()">确 定</el-button>
                </div>
              </el-dialog>

           <template>
           <el-popconfirm
             :title="deptname1(scope.row.deptname)"
             @onConfirm="handleDelete(scope.$index, scope.row)"
           >
             <el-button size="mini" type="danger" slot="reference">删除</el-button>
           </el-popconfirm>
           </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageination">
        <el-pagination
          background
          :page-size=pageSize
          :current-page=pageNum
          layout="prev, pager, next"
          @current-change="currentPage"
          :total="count">
        </el-pagination>
        </div>
  </div>
</template>

<script>

export default{
  name: 'deptment',
  data () {
    return {
      tableData:[
      ],
      deptAddForm:{

      },
      count:0,
      queryDeptText:'',
      dialogFormVisible:false,
      showAddDeptDialog:false,
      labelPosition:"right",
      pageSize:8,
      pageNum:1,
      form:{
        orginData:{
          deptnum:'',
          deptname:'',
          classifyname:'',
          typename:''
        },
        deptData:{
          originNum:"",

        },
        deptclassity:[
        ],
        depttype:[
        ],
        deptclassity_value:'',
        depttype_value:'',
      },
      formLabelWidth: '120px',
    }
  },
  computed:{

  },
  methods:{
  	onlord1:function(){
  	    let urlTable=`/hisbg/table?pageNum=1&pageSize=${this.pageSize}`;
  	    let g_table=this.$axios.get(urlTable);
  		g_table.then(res=>{
  			this.tableData=res.data.list;
        this.count=res.data.count;
  		})
  	},
    onlord:function(page,queryDeptText){
        let urlTable=`/hisbg/table?pageNum=${page}&pageSize=${this.pageSize}&deptnum=${queryDeptText}&deptname=${queryDeptText}`;
        let g_table=this.$axios.get(urlTable);
    	g_table.then(res=>{
    		this.tableData=res.data.list;
        this.count=res.data.count;
    	})
    },
    onlord2:function(){
    let urlDeptClassity="/hisbg/deptclassity";
    let g_deptclassity=this.$axios.get(urlDeptClassity);
    g_deptclassity.then(res=>{
    this.form.deptclassity=res.data;
    })
    },
    onlord3:function(){
    let urlDeptType="/hisbg/depttype";
    let g_depttype=this.$axios.get(urlDeptType);
    g_depttype.then(res=>{
    this.form.depttype=res.data;
    })
    },
  	handleDelete:function(index,row){
  		let id=row.id;
      let url="/hisbg/deltable?id="+id;
      let g=this.$axios.get(url);
      let rs;
      g.then(res=>{
        rs=res.data;
        if(rs){
          this.onlord(this.pageNum,this.queryDeptText);
        }else{
          alert("删除失败");
        }
      })
  	},
    deptname1:function(text){
        return "确定删除"+text+"?";
    },
    currentPage:function(pageNum){
        this.pageNum=pageNum;
        this.onlord(this.pageNum,this.queryDeptText);
        // let urlTable=`/hisbg/table?pageNum=${pageNum}&pageSize=${this.pageSize}`;
        //   let g_table=this.$axios.get(urlTable);
        // g_table.then(res=>{
        // 	this.tableData=res.data.list;
        //   this.count=res.data.count;
        //   });
    },
    editDept:function(row){
        this.dialogFormVisible = true;
        this.form.orginData.deptnum=row.deptnum;
        this.form.orginData.deptname=row.deptname;
        this.form.orginData.classifyname=row.classifyname;
        this.form.orginData.typename=row.typename;
        this.form.deptData=this.form.orginData;
        this.form.deptData.originId=row.id;
    },
    updateDept:function(){
      this.dialogFormVisible = false;
        let url="/hisbg/updatedept";
        let g = this.$axios.post(url,this.$qs.stringify(this.form.deptData));
        let rs;
        g.then(res=>{
          rs=res.data;
          console.log(rs);
          if(rs){
            this.onlord(this.pageNum,this.queryDeptText);
            this.deptAddForm={};
          }else{
            alert("编辑失败");
          }
        })
      },
      addDeptDialog:function(){
        this.showAddDeptDialog = false;
        let url="/hisbg/adddept";
        let g = this.$axios.post(url,this.$qs.stringify(this.deptAddForm));
        let rs;
        g.then(res=>{
          rs=res.data;
          console.log(rs);
          if(rs){
            this.onlord(1,this.queryDeptText);
            this.pageNum=1;
            this.deptAddForm={};
          }else{
            alert("增加失败");
          }
        })
      },
      queryDept:function(){
        if(this.queryDeptText){
          // let url=`/hisbg/querydept?deptnum=${this.queryDeptText}&deptname=${this.queryDeptText}`;
          //     let g=this.$axios.get(url);
          //     let rs;
          //     g.then(res=>{
          //       rs=res.data.list;
          //       this.count=res.data.count;
          //       if(rs&&rs.length>0){
          //         this.tableData=rs;
          //       }else{
          //         alert("查询失败");
          //       }
          //     })
          this.onlord(1,this.queryDeptText);
          }else{
            // alert("请输入需要查询的科室类别");
            this.onlord(1);
          }
      }
    },

  mounted:function(){
    this.onlord();
    this.onlord2();
    this.onlord3();
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .pageination{
        width: 70%;
        text-align: center;
    }
</style>
